<!-- 使用AI测试生成静态页面，查看UI是否与Figma一致，测试还原度 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Usage Trends Dashboard 2 – Static Mock</title>
    <style>
      :root {
        --bg-page: #f1f1f1;
        --bg-card: #ffffff;
        --text-primary: #242424;
        --text-secondary: #545454;
        --text-accent: #f2f2f2;
        --tab-selected: #3434e1;
        --tab-border: #d9d9d9;
        --grid-line: rgba(84, 84, 84, 0.2);
        --chart-line: #5d5de7;
        --chart-dot: #ffffff;
        --tooltip-bg: #ffffff;
        --tooltip-border: rgba(93, 93, 231, 0.35);
        --font-family: 'Roboto', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        background: var(--bg-page);
        font-family: var(--font-family);
        display: flex;
        justify-content: center;
        padding: 48px 16px;
        color: var(--text-secondary);
      }

      .dashboard-card {
        width: 375px;
        background: var(--bg-card);
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.05);
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
      }

      .header {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .header h1 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.25;
        color: var(--text-primary);
        letter-spacing: 0.01em;
      }

      .header p {
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: 0.01em;
        color: var(--text-secondary);
      }

      .tabs {
        display: flex;
        gap: 0;
      }

      .tab {
        border-radius: 8px;
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.01em;
        line-height: 1.5;
        border: 1px solid var(--tab-border);
        background: var(--bg-card);
        color: var(--text-secondary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 72px;
        position: relative;
      }

      .tab.selected {
        background: var(--tab-selected);
        border-color: transparent;
        color: var(--text-accent);
        box-shadow: inset 0 0 0 1px rgba(52, 52, 225, 0.45);
      }

      .tab + .tab {
        margin-left: -1px;
      }

      .tab:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      .tab:nth-child(2) {
        border-radius: 0;
      }

      .tab:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      .chart-card {
        position: relative;
        border-radius: 12px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        padding: 24px 16px 20px 16px;
        overflow: hidden;
      }

      .chart-inner {
        position: relative;
        display: flex;
        gap: 12px;
      }

      .y-axis {
        width: 48px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 181px;
        padding: 0;
        font-size: 12px;
        line-height: 1.2;
        letter-spacing: 0.02em;
      }

      .y-label {
        display: flex;
        align-items: center;
        gap: 9px;
        color: var(--text-secondary);
      }

      .y-label::after {
        content: '';
        flex: 1;
        border-top: 1px dashed rgba(84, 84, 84, 0.28);
        opacity: 0.8;
      }

      .graph-area {
        position: relative;
        width: 290px;
        height: 181px;
      }

      .graph-area::before,
      .graph-area::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        border-top: 1px dashed rgba(84, 84, 84, 0.12);
      }

      .graph-area::before {
        top: 60px;
      }

      .graph-area::after {
        top: 120px;
      }

      svg#line-chart {
        width: 100%;
        height: 100%;
      }

      .x-axis {
        margin-top: 12px;
        margin-left: 48px;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        font-size: 12px;
        letter-spacing: 0.02em;
        color: var(--text-secondary);
      }

      .tooltip {
        position: absolute;
        top: 92px;
        right: 42px;
        background: var(--tooltip-bg);
        border-radius: 8px;
        box-shadow: 0 12px 20px rgba(52, 52, 225, 0.18);
        border: 1px solid var(--tooltip-border);
        padding: 12px 16px;
        min-width: 116px;
        font-size: 12px;
        letter-spacing: 0.02em;
        color: var(--text-secondary);
      }

      .tooltip strong {
        display: block;
        font-size: 14px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 4px;
      }

      .tooltip::after {
        content: '';
        position: absolute;
        bottom: -12px;
        left: 50%;
        width: 0;
        height: 0;
        border-width: 12px 12px 0 12px;
        border-style: solid;
        border-color: var(--tooltip-bg) transparent transparent transparent;
        filter: drop-shadow(0 2px 4px rgba(52, 52, 225, 0.18));
        transform: translateX(-50%);
      }

      @media (max-width: 420px) {
        body {
          padding: 32px 8px;
        }
        .dashboard-card {
          width: 100%;
          max-width: 375px;
        }
      }
    </style>
  </head>
  <body>
    <div class="dashboard-card">
      <div class="header">
        <h1>Usage Trends at Last 6 Months</h1>
        <p>Usage Trends (MB)</p>
      </div>

      <div class="tabs">
        <div class="tab selected">Data</div>
        <div class="tab">Voice</div>
        <div class="tab">SMS</div>
      </div>

      <div class="chart-card">
        <div class="chart-inner">
          <div class="y-axis">
            <div class="y-label">200</div>
            <div class="y-label">150</div>
            <div class="y-label">100</div>
            <div class="y-label">50</div>
            <div class="y-label">0</div>
          </div>
          <div class="graph-area">
            <svg id="line-chart" viewBox="0 0 290 181" role="img" aria-labelledby="title desc">
              <title id="title">Mobile usage trend</title>
              <desc id="desc">Daily usage trend with highlighted peak</desc>
              <defs>
                <linearGradient id="areaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" stop-color="rgba(56, 104, 255, 0.36)" />
                  <stop offset="100%" stop-color="rgba(56, 104, 255, 0)" />
                </linearGradient>
              </defs>
              <path
                d="M0 160 L0 140 C40 120 60 110 90 128 C130 152 150 90 185 110 C220 130 240 80 265 95 C280 102 290 100 290 100 L290 181 L0 181 Z"
                fill="url(#areaGradient)"
              ></path>
              <path
                d="M0 140 C40 120 60 110 90 128 C130 152 150 90 185 110 C220 130 240 80 265 95 C280 102 290 100 290 100"
                fill="none"
                stroke="var(--chart-line)"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></path>
              <circle cx="240" cy="80" r="8" fill="var(--chart-line)" stroke="#ffffff" stroke-width="2"></circle>
              <circle cx="240" cy="80" r="4" fill="#ffffff"></circle>
            </svg>
          </div>
        </div>

        <div class="tooltip">
          <strong>100.00 MB</strong>
          Total
        </div>

        <div class="x-axis">
          <span>Jun</span>
          <span>Aug</span>
          <span>Sep</span>
          <span>Oct</span>
          <span>Nov</span>
          <span>Dec</span>
        </div>
      </div>
    </div>
  </body>
</html>
